<template>
    <div class="login">
        <img src="../assets/login.a4c656a9.png" alt="">
    <van-form>
  <van-field
  v-model="mobile"
  center
  clearable
  placeholder="请输入手机号"
>
  <template #button>
    <van-button size="small" type="default" style="color:orange" @click="btnSms">发送验证码</van-button>
  </template>
</van-field>
  <van-field
    v-model="sms"
    type="password"
    placeholder="验证码"
  >
  <template #button>
   <span v-show="show">({{num}})</span>
  </template>
  </van-field>
  <p><span style="color:#ccc;">*未注册的手机号将自动注册</span><span style="color:#ccc;" @click="$router.push('/login')">使用密码登录</span></p>
  <div style="margin:.6rem;">
    <van-button round block  color="linear-gradient(to right, rgb(246,160,113), rgb(249,88,2))" native-type="submit" @click="login">登录</van-button>
  </div>
</van-form>

    </div>
</template>

<script>
import { Toast } from "vant";
import { smsode, yzLogin } from "../Request/http.js";
export default {
  name: "EverydaySms",
  data() {
    return {
      num: 6,
      show: false,
      sms: "",
      mobile: "",
      password: ""
    };
  },
  mounted() {},

  methods: {
    btnSms() {
      var smss = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!smss.test(this.mobile)) {
        Toast.fail("手机号格式不正确");
        this.mobile = "";
        return false;
      }
      smsode({ sms_type: "login", mobile: this.mobile }).then(res => {
        console.log(res, "sms");
              localStorage.setItem('DeviceID',res.user_id)
        if (res) {
          this.show = true;
          var timer = setInterval(() => {
            this.num--;
            if (this.num == 0) {
              clearInterval(timer);
              this.show = false;
              this.num = 6;
            }
          }, 1000);
        }
      });
    },
    login() {
      yzLogin({
        mobile: this.mobile,
        sms_code: this.sms,
        type: 2,
        client: 1
      }).then(res => {
        console.log(res, "login");
        this.$router.push("/setnewpass");
        localStorage.setItem("login", JSON.stringify(res));
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #fff;
  img {
    width: 90%;
    padding: 0.8rem 0.4rem;
  }
  p {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  li {
    display: flex;
    flex-direction: row;
    text-align: center;
    span {
      padding-top: 1rem;
      font-size: 0.5rem;
      color: #ccc;
    }
  }
}
</style>